<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<meta name="HandheldFriendly" content="true"/>
		<meta name="MobileOptimized" content="320"/>
		<title>Hello H5+</title>
		<script type="text/javascript" src="../js/common.js"></script>
		<script type="text/javascript" charset="utf-8">
var ws=null,list=null;
// 扩展API加载完毕，现在可以正常调用扩展API 
function plusReady(){
	ws=plus.webview.currentWebview();
	wo=ws.opener();
	var topoffset='45px';
	if(plus.navigator.isImmersedStatusbar()){// 兼容immersed状态栏模式
		topoffset=(Math.round(plus.navigator.getStatusbarHeight())+45)+'px';
	}
	list=plus.webview.create("webview_pullrefresh_custom.html","webview_pullrefresh_custom.html",{top:topoffset,bottom:"0px",bounce:"vertical"});
	ws.append(list);
	ws.addEventListener("show",function(){
		refresh();
	},false);
	if(!ws.preate){
		list.addEventListener("loaded",function(){//叶面加载完成后才显示
			ws.show("pop-in");
			wo.evalJS("closeWaiting()");
		},false);
	}
	ws.append(list);
	// 实现列表可下拉刷新
	list.addEventListener("dragBounce",onPullStateChange,false);
	list.setBounce({position:{top:"100px"},changeoffset:{top:"50px"}});
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
// DOMContentLoaded事件处理
var etext=null,eicon=null;
document.addEventListener("DOMContentLoaded",function(){
	etext=document.getElementById("text");
	eicon=document.getElementById("icon");
},false);

// 下拉状态改变
function onPullStateChange(e){
	switch(e.status){
		case "beforeChangeOffset"://下拉可刷新状态
		pull1();
		break;
		case "afterChangeOffset"://松开可刷新状态
		pull2();
		break;
		case "dragEndAfterChangeOffset"://正在刷新状态
		list.evalJS("onRefresh();");
		pull3();
		break;
		default:
		break;
	}
}
function pull1(){
	etext.textContent="下拉可刷新";
	eicon.style.webkitTransition="all 0.3s ease-in";
	eicon.style.webkitTransform="rotate(0deg)";
}
function pull2(){
	etext.textContent="松开可刷新";
	eicon.style.webkitTransition="all 0.3s ease-in";
	eicon.style.webkitTransform="rotate(180deg)";
}
function pull3(){
	etext.textContent="正在刷新...";
	eicon.src="../img/pull_fresh.png";
	eicon.style.webkitAnimation="spin 1s infinite linear";
}
function pullReset(){
	etext.textContent="下拉可刷新";
	eicon.src="../img/pull_arrow.png";
	eicon.style.webkitTransition="";
	eicon.style.webkitTransform="";
	eicon.style.webkitAnimation="";
}
function refresh(){
	pull3();
	list.setBounce({offset:{top:"50px"}});
}
		</script>
		<link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>
		<style type="text/css">
#pull{
	width:24px;
	height:100%;
	display:inline-block;
	margin:0 1em;
}
#icon{
	height:24px;
	vertical-align:middle;
}
@-webkit-keyframes spin{
    0% {
        -webkit-transform:rotate(0deg);
    }
    100% {
        -webkit-transform:rotate(360deg);
    }
}
.irefresh {
	background:no-repeat center center url();
	background-size:50px 44px;
}
		</style>
	</head>
	<body style="background:#EAEAEA;">
		<header id="header" style="position:static">
			<div class="nvbt iback" onclick="back();"></div>
			<div class="nvtt">自定义下拉刷新</div>
			<div class="nvbt irefresh" onclick="refresh()"></div>
		</header>
		<div style="text-align:center;height:44px;line-height:44px;">
			<div id="pull"><img id="icon" src="../img/pull_arrow.png"/></div><font id="text">下拉可刷新</font>
		</div>
	</body>
	<script type="text/javascript" src="../js/immersed.js" ></script>
</html>